<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="topTab">
			<el-tabs v-model="activeName" @tab-click="tabClick">
				<el-tab-pane label="返佣加减" name="0"></el-tab-pane>
				<el-tab-pane label="返佣取消" name="1"></el-tab-pane>
				<el-tab-pane label="代发返佣" name="2"></el-tab-pane>
			</el-tabs>
		</template>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
						:merchantInfo.sync="merchantObj"
					></merchant-select>
				</el-form-item>
				<el-form-item
					label="操作时间:"
					class="flex-row-container"
					label-width="103px"
				>
					<el-date-picker
						v-model="searchTime"
						:picker-options="pickerOptions"
						type="daterange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						:clearable="false"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="tabSign === 2 ? '收款代理账号:' : '代理账号:'"
					class="flex-row-container"
					label-width="110px"
				>
					<el-input
						v-model="queryData.proxyName"
						:placeholder="$t('common.please_enter')"
						clearable
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
						v-symbols
					></el-input>
				</el-form-item>
				<el-form-item
					label="操作人:"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model="queryData.operateName"
						clearable
						:placeholder="$t('common.please_enter')"
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
						v-symbols
					></el-input>
				</el-form-item>
				<el-form-item
					v-if="tabSign === 2"
					label="付款代理账号:"
					class="flex-row-container"
					label-width="110px"
				>
					<el-input
						v-model="queryData.payProxyName"
						:placeholder="$t('common.please_enter')"
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
						clearable
						v-symbols
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						:loading="loading"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				ref="tables"
				v-loading="loading"
				border
				size="mini"
				:data="tableData"
				style="width: 100%"
				class="small-size-table"
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
				element-loading-spinner="el-icon-loading"
				highlight-current-row
			>
				<el-table-column
					align="center"
					label="返佣周期"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.cycleName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tabSign === 2 ? '收款代理账号' : '代理账号'"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.proxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="所属商户"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
					</template>
				</el-table-column>

				<template v-if="tabSign === 0">
					<el-table-column
						align="center"
						label="返佣加减金额"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span :style="getAmountColorStyle(scope.row)">
								{{ getAmountSign(scope.row)
								}}{{
									handleNumber(
										scope.row.currency,
										scope.row.commissionAdjustAmount
									)
								}}
							</span>
						</template>
					</el-table-column>
				</template>
				<template v-if="tabSign === 2">
					<el-table-column
						align="center"
						label="收到返佣金额"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.receiveCommissionAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						label="付款代理账号"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.payProxyName || '-' }}
						</template>
					</el-table-column>
				</template>
				<el-table-column
					align="center"
					label="操作人"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.operateName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="操作时间"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="备注"
					width="220"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.remark || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
</template>

<script>
import dayjs from 'dayjs'
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
const end1 = () => {
	return dayjs().endOf('day')
}
const start1 = () => {
	return dayjs()
		.startOf('day')
		.subtract(29, 'day')
}
export default {
	name: routerNames.commissionControlRecord,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: ['wrap'],
			activeName: '0',
			queryData: {},
			searchTime: [start1(), end1()],
			tableData: [],
			merchantObj: '',
			tabSign: 0
		}
	},
	computed: {},
	created() {},
	mounted() {},
	methods: {
		getAmountSign(row) {
			let sign = ''
			if (row.commissionAdjustAmount > 0) {
				if (row.operationType === 1) {
					sign = '+'
				}
				if (row.operationType === 2) {
					sign = '-'
				}
			}
			return sign
		},
		getAmountColorStyle(row) {
			let colorStyle = this.handleNumberColor(row.commissionAdjustAmount)
			// operationType 1:增额 2:减额
			if (row.operationType === 2) {
				colorStyle = this.handleNumberColor(
					row.commissionAdjustAmount * -1
				)
			}
			return colorStyle
		},
		tabClick(num) {
			this.tabSign = Number(num.index)
			this.reset()
		},
		loadData() {
			let operationTypesArr = [1, 2]
			if (this.tabSign === 1) {
				operationTypesArr = [3]
			} else if (this.tabSign === 2) {
				operationTypesArr = [4]
			}
			const [startTime, endTime] = this.searchTime || []
			const params = {
				...this.queryData,
				...this.getParams(),
				operationTypes: operationTypesArr,
				operationStartTime: dayjs(startTime).format(
					'YYYY-MM-DD HH:mm:ss'
				),
				operationEndTime: dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
			}
			this.loading = true
			this.tableData = []
			this.$api
				.getLogListPage(params)
				.then((res) => {
					const { record, totalRecord } = res.data || {}
					this.tableData = record || []
					this.total = totalRecord || 0
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.pageNum = 1
			this.queryData = {}
			this.merchantObj = ''
			this.searchTime = [start1(), end1()]
			this.loadData()
		},
		reloadTime() {
			this.searchTime = [start1(), end1()]
		}
	}
}
</script>
